<div class="max-w-3xl mx-auto">
    <h2 class="text-xl font-semibold mb-6 text-center">数据库配置</h2>
    
    <form id="dbForm">
        <div class="space-y-4">
            <div class="grid grid-cols-12 items-center gap-4">
                <label class="col-span-3 text-right text-sm font-medium text-gray-700">数据库主机：</label>
                <div class="col-span-9">
                    <input type="text" name="db_host" value="127.0.0.1" 
                        class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                    <p class="mt-1 text-sm text-gray-500">默认为 localhost</p>
                </div>
            </div>
            
            <div class="grid grid-cols-12 items-center gap-4">
                <label class="col-span-3 text-right text-sm font-medium text-gray-700">数据库端口：</label>
                <div class="col-span-9">
                    <input type="text" name="db_port" value="3306" 
                        class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                    <p class="mt-1 text-sm text-gray-500">默认为 3306</p>
                </div>
            </div>
            
            <div class="grid grid-cols-12 items-center gap-4">
                <label class="col-span-3 text-right text-sm font-medium text-gray-700">数据库名称：</label>
                <div class="col-span-9">
                    <input type="text" name="db_name" required value="adminmatrix_net"
                        class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                    <p class="mt-1 text-sm text-gray-500">数据库必须已存在</p>
                </div>
            </div>
            
            <div class="grid grid-cols-12 items-center gap-4">
                <label class="col-span-3 text-right text-sm font-medium text-gray-700">数据库用户：</label>
                <div class="col-span-9">
                    <input type="text" name="db_user" required value="adminmatrix_net" 
                        class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                    <p class="mt-1 text-sm text-gray-500">数据库账号</p>
                </div>
            </div>

            <div class="grid grid-cols-12 items-center gap-4">
                <label class="col-span-3 text-right text-sm font-medium text-gray-700">数据库密码：</label>
                <div class="col-span-9">
                    <input name="db_password" required value="CeiYeTbtHBWM51JP"
                           class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                    <p class="mt-1 text-sm text-gray-500">数据库密码</p>
                </div>
            </div>


            <div class="grid grid-cols-12 items-center gap-4">
                <label class="col-span-3 text-right text-sm font-medium text-gray-700">数据表前缀：</label>
                <div class="col-span-9">
                    <input name="db_prefix" required value="matrix_"
                           class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                    <p class="mt-1 text-sm text-gray-500">数据库表前缀</p>
                </div>
            </div>
        </div>
        
        <div id="validationResult" class="mt-8">
            <div class="bg-blue-100 text-blue-700 p-4 rounded-md">
                请填写数据库配置信息，点击验证并下一步
            </div>
        </div>

        <div class="mt-4 bg-blue-50 p-4 rounded-md">
            <div class="text-sm text-blue-700">
                <h4 class="font-medium mb-2">提示：</h4>
                <ul class="list-disc list-inside space-y-1">
                    <li>请确保数据库已创建</li>
                    <li>账号需要具备创建表的权限</li>
                    <li>建议使用独立的数据库</li>
                </ul>
            </div>
        </div>

        <div class="mt-8 text-center space-x-4">
            <a href="index.php?action=env-check" class="bg-gray-500 text-white px-6 py-2 rounded-md hover:bg-gray-600 transition-colors inline-block">
                上一步：环境检测
            </a>
            <button type="button" onclick="validateAndNext()" id="nextBtn" class="bg-blue-500 text-white px-6 py-2 rounded-md hover:bg-blue-600 transition-colors inline-block">
                验证并下一步
            </button>
        </div>
    </form>

    <div id="testResult" class="mt-4 text-center hidden">
        <div class="inline-block px-4 py-2 rounded-md text-sm"></div>
    </div>
</div>

<script>
async function validateAndNext() {
    const nextBtn = document.getElementById('nextBtn');
    const validationResult = document.getElementById('validationResult');
    const form = document.getElementById('dbForm');
    const formData = new FormData(form);

    // 显示加载状态
    nextBtn.disabled = true;
    nextBtn.innerHTML = `
        <svg class="animate-spin -ml-1 mr-2 h-5 w-5 inline-block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
        验证中...
    `;

    validationResult.innerHTML = `
        <div class="bg-blue-100 text-blue-700 p-4 rounded-md">
            <svg class="animate-spin -ml-1 mr-2 h-5 w-5 inline-block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            正在验证数据库连接...
        </div>
    `;

    try {
        const response = await fetch('index.php?action=test-db', {
            method: 'POST',
            body: formData
        });
        
        const result = await response.json();
        
        if (result.status) {
            validationResult.innerHTML = `
                <div class="bg-green-100 text-green-700 p-4 rounded-md">
                    ✓ ${result.message}
                </div>
            `;
            // 保存配置并跳转
            const dbConfig = {};
            formData.forEach((value, key) => {
                dbConfig[key] = value;
            });
            localStorage.setItem('dbConfig', JSON.stringify(dbConfig));
            setTimeout(() => {
                window.location.href = 'index.php?action=execute';
            }, 1000); // 延迟1秒跳转，让用户看到成功提示
        } else {
            validationResult.innerHTML = `
                <div class="bg-red-100 text-red-700 p-4 rounded-md">
                    ✗ ${result.message}
                </div>
            `;
            nextBtn.disabled = false;
            nextBtn.textContent = '验证并下一步';
        }
    } catch (error) {
        validationResult.innerHTML = `
            <div class="bg-red-100 text-red-700 p-4 rounded-md">
                ✗ 验证请求失败，请重试
            </div>
        `;
        nextBtn.disabled = false;
        nextBtn.textContent = '验证并下一步';
    }
}
</script> 